<template>
	<view>
		<cu-custom bgColor="mybg-green" isBack>
			<block slot="backText"></block>
			<block slot="content">订单列表</block>
		</cu-custom>
		<form>
			<scroll-view scroll-y @scrolltolower="next_page" style="height: calc(100vh - 58px);">
				<view style="padding-bottom: 30px;">
					<view class="flex-column margin-tb-sm padding-lr-sm">
						<view
							class="flex-row justify-between mybg-dgrey padding-xs text-gray exl-top text-center text-bold myfont-12px">
							<view class="width-20">订报人</view>
							<view class="width-20">订报时间</view>
							<!-- <view class="width-20">数量</view> -->
							<view class="width-20">详细地址</view>
							<view class="width-20">类型</view>
							<view class="width-20">金额</view>
							<view class="width-20">状态</view>
						</view>
						<view
							class="flex-row justify-between padding-xs text-gray text-center exl-lr myfont-11px align-center"
							v-for="(order,index) in order_list" :key='index'
							:class="(index === order_list.length - 1?'exl-bottom ':'') + (index % 2 === 0 ?'bg-white':'mybg-dgrey')">
							<!-- <view class="flex-row  padding-sm text-gray text-center bg-white exl-lr exl-bottom"> -->
							<view class="width-20">{{order.receiver}}</view>
							<view class="width-20">{{order.order_date}}</view>
							<!-- <view class="width-20">{{`${order.months}月*${order.amount}份`}}</view> -->
							<view class="width-20">{{order.address}}</view>
							<view class="width-20">{{order.subscription_type =='普通订报'?'普通':'小记者'}}</view>
							<view class="width-20 padding-lr-xs">{{order.total_fee}}</view>
							<view class="width-20 padding-lr-xs">{{payStatus[order.pay_status]}}</view>
						</view>
					</view>
				</view>
				<view class="bg-white" style="width: 1px;height: 1px;margin-bottom: 40px;"></view>
			</scroll-view>
		</form>
		<view class="text-center full-width flex-column"
			style="position: fixed; bottom: 7vh; left: 50%; transform: translateX(-50%); font-size: 15px;">
			<text>咨询电话:0779-2030018</text>
			<text class="">主办单位:北海市融媒体中心</text>
		</view>

	</view>
</template>

<script>
	import {
		Mcaptcha
	} from '@/utils/mcaptcha'
	export default {
		data() {
			return {
				modalName: null,
				order_list: [],
				end: false,
				listQuery: {
					limit: 20,
					page: 1,
				},
				payStatus: ["未支付", "已支付", "支付取消", "支付失败", "正在退款", "退款失败", "退款成功"]
			};
		},
		methods: {
			next_page() {
				if (!this.end) {
					this.listQuery.page++
					this.get_orders()
				}
			},
			monthNumber: function(date1_str, date2_str) {
				const date1 = new Date(date1_str);
				const date2 = new Date(date2_str);
				const month_between = (date2.getFullYear() - date1.getFullYear()) * 12 + date2.getMonth() - date1
					.getMonth()
				return Math.abs(month_between);
			},
			get_orders: function() {
				let _this = this;
				let para = Object.assign({}, _this.listQuery)
				_this.$http.get('/app/order', {
					data: para
				}, (res) => {
					if (res.data.code == 20000) {
						if (res.data.items.length > 0) {
							let items = res.data.items
							items.forEach((ele, index) => {
								ele.months = _this.monthNumber(ele.start_date, ele.end_date)
								ele.order_date = ele.start_date.slice(0, 7) + '-' + ele.end_date.slice(
									0, 7)
								_this.order_list.push(ele)
							})
							console.log(_this.order_list)
						} else {
							_this.end = true
						}
						// console.log(_this.gym_list)
					} else {}
				});
			},
		},
		onLoad(option) {
			let _this = this;
			_this.get_orders()
		}
	}
</script>

<style>

</style>